<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/public.css">
</head>

<body>
    <!-- lineJoin 设置或返回两条线相交时，所创建的拐角类型 -->
    <!-- miterLimit  设置或返回最大斜接长度,只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效-->
    <!-- beginPath 起始一条路径，或重置当前路径-->
    <!-- moveTo 把路径移动到画布中的指定点，不创建线条-->
    <!-- lineTo 添加一个新点，然后在画布中创建从该点到最后指定点的线条-->
    <!-- stroke 绘制已定义的路径-->
    <!-- lineWidth 设置或返回当前的线条宽度-->

    <canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>


    <script>
        var a = document.getElementById('myCanvas1');
        var atx = a.getContext('2d');
        atx.beginPath();
        atx.lineWidth = 10;
        atx.lineJoin="miter";
        atx.miterLimit=2;
        atx.moveTo(20, 20);
        atx.lineTo(200, 20);
        atx.lineTo(20, 200);
        atx.stroke();
    </script>
</body>

</html>